<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D空间与景深</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            border:2px solid black;
            margin:520px;
            /*子元素需要有3D效果,首先要在父元素上开启3D空间*/
            /*transform-style: flat;扁平化,也就是2D空间*/
            transform-style: preserve-3d;/*开启3D空间*/

            /*设置景深,如果不设置,看不出3D的效果,意义是眼睛对z轴的距离,不能给负数*/
            perspective: 500px;

        }
        .inner{
            width: 300px;
            height: 300px;
            background-color: deepskyblue;
            text-align: center;
            line-height: 300px;
            /*3D旋转*/
            transform: rotateX(30deg);
        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner">inner1</div>
</div>

</body>
</html>